<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wordfixer</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="input-group flex-nowrap">
        <div class="input-group-prepend">
            <span class="input-group-text" id="addon-wrapping">输入字符（有空格输空格）</span>
        </div>
        <input id="letters" type="text" class="form-control" placeholder="word">
    </div>
    <button id="btn" type="button" class="btn btn-primary" >wordfixer</button>
    <div>备选：</div>
    <div id="result-zone">

    </div>
</div>

<script>

    var words = ['elf','eve','fir','ham','icy','ivy','joy','pie','toy','','','gift','gold','list','love','nice','sled','star','wish','wrap','xmas','yule','card','hope','noel','give','tree','coal','snow','','angel','bells','cider','elves','goose','holly','jesus','merry','myrrh','party','skate','visit','jolly','scarf','candy','snowy','socks','kings','bonus','happy','','candle','creche','cookie','eggnog','eulogy','family','frosty','icicle','joyful','manger','season','spirit','tinsel','turkey','unwrap','wonder','winter','wreath','sleigh','parade','carols','lights','','charity','chimney','festive','holiday','krampus','mittens','naughty','package','pageant','rejoice','rudolph','scrooge','snowman','sweater','tidings','wassail','','','firewood','nativity','reindeer','shopping','snowball','stocking','toboggan','trimming','vacation','wise men','workshop','yuletide','yule log','blizzard','goodwill','presents','pinecone','','chestnuts','christmas','fruitcake','greetings','mince pie','mistletoe','ornaments','snowflake','tradition','partridge','fireplace','sugarplum','','','candy cane','decoration','ice skates','jack frost','north pole','nutcracker','saint nick'];

    $('#btn').click(function () {
        wordfixer();
    })
    showResult(words);
    function wordfixer() {
        // 把letters劈开
       var array = $('#letters').val();
       if(array) {
           array = array.toLowerCase();
           var length = array.length
           var patt = '['+array+']{'+length+'}'
           // for(var i =0;i<length;i++){
           //     // 含空格
           //     patt+= '(['+array+'])'
           // }
           // patt+=''
           console.log('patt:'+patt)
           var reg = new RegExp(patt);
           debugger
           //正则筛选
           var left = words.filter(function(item) {
               return item.search(reg)>=0;
           })
           showResult(left)
       }

    }
    function showResult(array) {
        $('#result-zone').html('');
        array.forEach(function(item){
            $('#result-zone').append('<div>'+item+'</div>')
        })
    }
</script>

</body>
</html>